<template>
  <div class="dashboard-container">
    <v-app>
      <!-- 顶部导航栏 -->
      <v-app-bar app color="primary" dark>
        <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
        <v-toolbar-title>{{ $t('dashboard.title') }}</v-toolbar-title>
        <v-spacer></v-spacer>
        
        <!-- 搜索框 -->
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          :label="$t('dashboard.search')"
          hide-details
          dense
          outlined
          dark
          class="mx-4 mt-1 search-field"
        ></v-text-field>
        
        <!-- 语言切换 -->
        <v-menu offset-y left>
          <template v-slot:activator="{ on, attrs }">
            <v-btn icon v-bind="attrs" v-on="on">
              <v-icon>mdi-translate</v-icon>
            </v-btn>
          </template>
          <v-list>
            <v-list-item
              v-for="locale in availableLocales"
              :key="locale.code"
              @click="switchLanguage(locale.code)"
            >
              <v-list-item-title>{{ locale.name }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
        
        <!-- 消息通知 -->
        <v-btn icon @click="showNotifications">
          <v-badge
            :content="notificationCount"
            :value="notificationCount"
            color="error"
            overlap
          >
            <v-icon>mdi-bell</v-icon>
          </v-badge>
        </v-btn>
        
        <!-- 用户头像菜单 -->
        <v-menu offset-y left>
          <template v-slot:activator="{ on, attrs }">
            <v-avatar
              class="ml-2"
              size="36"
              v-bind="attrs"
              v-on="on"
            >
              <v-img
                :src="user.avatar || 'https://cdn.vuetifyjs.com/images/john.jpg'"
                alt="User Avatar"
              ></v-img>
            </v-avatar>
          </template>
          <v-list>
            <v-list-item @click="navigateTo('/dashboard/profile')">
              <v-list-item-icon>
                <v-icon>mdi-account</v-icon>
              </v-list-item-icon>
              <v-list-item-title>{{ $t('dashboard.profile') }}</v-list-item-title>
            </v-list-item>
            <v-list-item @click="navigateTo('/dashboard/settings')">
              <v-list-item-icon>
                <v-icon>mdi-cog</v-icon>
              </v-list-item-icon>
              <v-list-item-title>{{ $t('dashboard.settings') }}</v-list-item-title>
            </v-list-item>
            <v-divider></v-divider>
            <v-list-item @click="logout">
              <v-list-item-icon>
                <v-icon>mdi-logout</v-icon>
              </v-list-item-icon>
              <v-list-item-title>{{ $t('dashboard.logout') }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-app-bar>
      
      <!-- 侧边栏导航 -->
      <v-navigation-drawer
        v-model="drawer"
        app
        temporary
        :width="280"
      >
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img :src="user.avatar || 'https://cdn.vuetifyjs.com/images/john.jpg'"></v-img>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title class="text-h6">{{ user.nickname }}</v-list-item-title>
            <v-list-item-subtitle>{{ user.email }}</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        
        <v-divider></v-divider>
        
        <v-list dense nav>
          <v-list-item
            v-for="item in menuItems"
            :key="item.title"
            :to="localePath(item.to)"
            link
          >
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ $t(item.title) }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
        
        <template v-slot:append>
          <div class="pa-2">
            <v-btn block color="primary" @click="logout">
              {{ $t('dashboard.logout') }}
            </v-btn>
          </div>
        </template>
      </v-navigation-drawer>
      
      <!-- 主要内容区域 -->
      <v-main>
        <v-container fluid>
          <!-- 欢迎信息 -->
          <v-row class="mb-6">
            <v-col cols="12">
              <v-card class="welcome-card">
                <v-card-text>
                  <div class="text-h5 mb-2">{{ $t('dashboard.welcome', { name: user.nickname }) }}</div>
                  <div>{{ $t('dashboard.lastLogin', { time: formatDate(user.lastActive) }) }}</div>
                </v-card-text>
              </v-card>
            </v-col>
          </v-row>
          
          <!-- 个人信息卡片 -->
          <v-row>
            <v-col cols="12" md="4">
              <v-card class="mb-4">
                <v-card-title>{{ $t('dashboard.profile') }}</v-card-title>
                <v-card-text>
                  <v-list-item three-line>
                    <v-list-item-avatar size="80" class="mt-0">
                      <v-img :src="user.avatar || 'https://cdn.vuetifyjs.com/images/john.jpg'"></v-img>
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title class="text-h6 mb-1">{{ user.nickname }}</v-list-item-title>
                      <v-list-item-subtitle>{{ user.email }}</v-list-item-subtitle>
                      <v-list-item-subtitle>{{ $t('dashboard.memberSince', { date: formatDate(user.registerDate) }) }}</v-list-item-subtitle>
                    </v-list-item-content>
                  </v-list-item>
                  
                  <!-- 资料完善度 -->
                  <div class="mt-4">
                    <div class="d-flex justify-space-between">
                      <span>{{ $t('dashboard.profileCompletion') }}</span>
                      <span>{{ profileCompletionPercentage }}%</span>
                    </div>
                    <v-progress-linear
                      :value="profileCompletionPercentage"
                      color="primary"
                      height="8"
                      class="mt-1"
                    ></v-progress-linear>
                  </div>
                  
                  <!-- 会员等级 -->
                  <div class="mt-4">
                    <div class="d-flex justify-space-between">
                      <span>{{ $t('dashboard.level') }}</span>
                      <span>{{ user.level }}</span>
                    </div>
                    <div class="d-flex justify-space-between">
                      <span>{{ $t('dashboard.points') }}</span>
                      <span>{{ user.points }}</span>
                    </div>
                  </div>
                </v-card-text>
                <v-card-actions>
                  <v-btn
                    text
                    color="primary"
                    @click="navigateTo('/dashboard/profile')"
                  >
                    {{ $t('dashboard.editProfile') }}
                  </v-btn>
                </v-card-actions>
              </v-card>
              
              <!-- 社交统计 -->
              <v-card>
                <v-card-title>{{ $t('dashboard.socialStats') }}</v-card-title>
                <v-card-text>
                  <v-list>
                    <v-list-item @click="navigateTo('/dashboard/following')">
                      <v-list-item-icon>
                        <v-icon>mdi-account-multiple</v-icon>
                      </v-list-item-icon>
                      <v-list-item-content>
                        <v-list-item-title>{{ $t('dashboard.following') }}</v-list-item-title>
                      </v-list-item-content>
                      <v-list-item-action>
                        <v-chip small>{{ user.followingCount }}</v-chip>
                      </v-list-item-action>
                    </v-list-item>
                    
                    <v-list-item @click="navigateTo('/dashboard/followers')">
                      <v-list-item-icon>
                        <v-icon>mdi-account-group</v-icon>
                      </v-list-item-icon>
                      <v-list-item-content>
                        <v-list-item-title>{{ $t('dashboard.followers') }}</v-list-item-title>
                      </v-list-item-content>
                      <v-list-item-action>
                        <v-chip small>{{ user.followerCount }}</v-chip>
                      </v-list-item-action>
                    </v-list-item>
                    
                    <v-list-item @click="navigateTo('/dashboard/publications')">
                      <v-list-item-icon>
                        <v-icon>mdi-file-document-multiple</v-icon>
                      </v-list-item-icon>
                      <v-list-item-content>
                        <v-list-item-title>{{ $t('dashboard.publications') }}</v-list-item-title>
                      </v-list-item-content>
                      <v-list-item-action>
                        <v-chip small>{{ user.publicationCount }}</v-chip>
                      </v-list-item-action>
                    </v-list-item>
                  </v-list>
                </v-card-text>
              </v-card>
            </v-col>
            
            <!-- 内容管理区域 -->
            <v-col cols="12" md="8">
              <!-- 我的收藏 -->
              <v-card class="mb-4">
                <v-card-title class="d-flex justify-space-between">
                  <span>{{ $t('dashboard.collections') }}</span>
                  <v-btn
                    text
                    color="primary"
                    @click="navigateTo('/dashboard/collections')"
                  >
                    {{ $t('dashboard.viewAll') }}
                  </v-btn>
                </v-card-title>
                <v-card-text>
                  <v-list two-line>
                    <template v-if="collections.length > 0">
                      <v-list-item
                        v-for="(item, index) in collections.slice(0, 3)"
                        :key="index"
                        @click="navigateTo(`/content/${item.id}`)"
                      >
                        <v-list-item-avatar>
                          <v-img :src="item.thumbnail"></v-img>
                        </v-list-item-avatar>
                        <v-list-item-content>
                          <v-list-item-title>{{ item.title }}</v-list-item-title>
                          <v-list-item-subtitle>{{ $t('dashboard.collectedOn', { date: formatDate(item.collectedAt) }) }}</v-list-item-subtitle>
                        </v-list-item-content>
                        <v-list-item-action>
                          <v-btn icon @click.stop="removeFromCollection(item.id)">
                            <v-icon>mdi-heart</v-icon>
                          </v-btn>
                        </v-list-item-action>
                      </v-list-item>
                    </template>
                    <v-list-item v-else>
                      <v-list-item-content>
                        <v-list-item-subtitle class="text-center">
                          {{ $t('dashboard.noCollections') }}
                        </v-list-item-subtitle>
                      </v-list-item-content>
                    </v-list-item>
                  </v-list>
                </v-card-text>
              </v-card>
              
              <!-- 浏览历史 -->
              <v-card class="mb-4">
                <v-card-title class="d-flex justify-space-between">
                  <span>{{ $t('dashboard.history') }}</span>
                  <v-btn
                    text
                    color="primary"
                    @click="navigateTo('/dashboard/history')"
                  >
                    {{ $t('dashboard.viewAll') }}
                  </v-btn>
                </v-card-title>
                <v-card-text>
                  <v-list two-line>
                    <template v-if="history.length > 0">
                      <v-list-item
                        v-for="(item, index) in history.slice(0, 3)"
                        :key="index"
                        @click="navigateTo(`/content/${item.id}`)"
                      >
                        <v-list-item-avatar>
                          <v-img :src="item.thumbnail"></v-img>
                        </v-list-item-avatar>
                        <v-list-item-content>
                          <v-list-item-title>{{ item.title }}</v-list-item-title>
                          <v-list-item-subtitle>{{ $t('dashboard.viewedOn', { date: formatDate(item.viewedAt) }) }}</v-list-item-subtitle>
                        </v-list-item-content>
                        <v-list-item-action>
                          <v-chip small>{{ formatDuration(item.duration) }}</v-chip>
                        </v-list-item-action>
                      </v-list-item>
                    </template>
                    <v-list-item v-else>
                      <v-list-item-content>
                        <v-list-item-subtitle class="text-center">
                          {{ $t('dashboard.noHistory') }}
                        </v-list-item-subtitle>
                      </v-list-item-content>
                    </v-list-item>
                  </v-list>
                </v-card-text>
              </v-card>
              
              <!-- 我的发布 -->
              <v-card>
                <v-card-title class="d-flex justify-space-between">
                  <span>{{ $t('dashboard.publications') }}</span>
                  <v-btn
                    text
                    color="primary"
                    @click="navigateTo('/dashboard/publications')"
                  >
                    {{ $t('dashboard.viewAll') }}
                  </v-btn>
                </v-card-title>
                <v-card-text>
                  <v-list two-line>
                    <template v-if="publications.length > 0">
                      <v-list-item
                        v-for="(item, index) in publications.slice(0, 3)"
                        :key="index"
                        @click="navigateTo(`/content/${item.id}`)"
                      >
                        <v-list-item-avatar>
                          <v-img :src="item.thumbnail"></v-img>
                        </v-list-item-avatar>
                        <v-list-item-content>
                          <v-list-item-title>{{ item.title }}</v-list-item-title>
                          <v-list-item-subtitle>
                            {{ $t('dashboard.publishedOn', { date: formatDate(item.publishedAt) }) }}
                            • {{ $t('dashboard.views', { count: item.views }) }}
                            • {{ $t('dashboard.likes', { count: item.likes }) }}
                          </v-list-item-subtitle>
                        </v-list-item-content>
                        <v-list-item-action>
                          <v-btn icon @click.stop="editPublication(item.id)">
                            <v-icon>mdi-pencil</v-icon>
                          </v-btn>
                        </v-list-item-action>
                      </v-list-item>
                    </template>
                    <v-list-item v-else>
                      <v-list-item-content>
                        <v-list-item-subtitle class="text-center">
                          {{ $t('dashboard.noPublications') }}
                        </v-list-item-subtitle>
                      </v-list-item-content>
                    </v-list-item>
                  </v-list>
                </v-card-text>
                <v-card-actions>
                  <v-btn
                    color="primary"
                    block
                    @click="navigateTo('/dashboard/publications/new')"
                  >
                    <v-icon left>mdi-plus</v-icon>
                    {{ $t('dashboard.createNew') }}
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
      </v-main>
      
      <!-- 底部信息栏 -->
      <v-footer app padless>
        <v-card flat tile width="100%" class="text-center">
          <v-card-text class="py-2 grey--text text--darken-3">
            <v-btn
              v-for="link in footerLinks"
              :key="link.text"
              text
              small
              color="grey darken-3"
              class="mx-2"
              :to="localePath(link.to)"
            >
              {{ $t(link.text) }}
            </v-btn>
          </v-card-text>
          <v-divider></v-divider>
          <v-card-text class="py-2 grey--text text--darken-3">
            {{ new Date().getFullYear() }} — <strong>{{ $t('footer.copyright') }}</strong>
          </v-card-text>
        </v-card>
      </v-footer>
      
      <!-- 通知抽屉 -->
      <v-navigation-drawer
        v-model="notificationDrawer"
        app
        temporary
        right
        :width="320"
      >
        <v-toolbar color="primary" dark>
          <v-toolbar-title>{{ $t('dashboard.notifications') }}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="notificationDrawer = false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-toolbar>
        
        <v-list>
          <template v-if="notifications.length > 0">
            <v-list-item
              v-for="(notification, index) in notifications"
              :key="index"
              :class="{ 'grey lighten-4': !notification.read }"
              @click="readNotification(notification.id)"
            >
              <v-list-item-avatar>
                <v-icon :color="getNotificationColor(notification.type)">
                  {{ getNotificationIcon(notification.type) }}
                </v-icon>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title>{{ notification.title }}</v-list-item-title>
                <v-list-item-subtitle>{{ notification.content }}</v-list-item-subtitle>
                <v-list-item-subtitle class="text-caption">
                  {{ formatDate(notification.createdAt) }}
                </v-list-item-subtitle>
              </v-list-item-content>
              <v-list-item-action>
                <v-btn
                  icon
                  x-small
                  @click.stop="deleteNotification(notification.id)"
                >
                  <v-icon>mdi-delete</v-icon>
                </v-btn>
              </v-list-item-action>
            </v-list-item>
          </template>
          <v-list-item v-else>
            <v-list-item-content>
              <v-list-item-subtitle class="text-center">
                {{ $t('dashboard.noNotifications') }}
              </v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
        
        <template v-slot:append>
          <div class="pa-2">
            <v-btn
              block
              text
              color="primary"
              @click="markAllAsRead"
              :disabled="!hasUnreadNotifications"
            >
              {{ $t('dashboard.markAllAsRead') }}
            </v-btn>
          </div>
        </template>
      </v-navigation-drawer>
      
      <!-- 主题切换 -->
      <v-btn
        fab
        small
        color="primary"
        class="theme-toggle"
        @click="toggleTheme"
      >
        <v-icon>{{ $vuetify.theme.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
      </v-btn>
    </v-app>
  </div>
</template>

<script>
export default {
  name: 'DashboardPage',
  // 需要认证才能访问
  middleware: 'auth',
  
  head() {
    return {
      title: this.$t('dashboard.title')
    }
  },
  
  data() {
    return {
      drawer: false,
      notificationDrawer: false,
      search: '',
      // 用户数据
      user: {
        id: '',
        nickname: '',
        email: '',
        avatar: '',
        bio: '',
        registerDate: '',
        lastActive: '',
        level: 1,
        points: 0,
        followingCount: 0,
        followerCount: 0,
        publicationCount: 0
      },
      // 菜单项
      menuItems: [
        { title: 'dashboard.home', icon: 'mdi-home', to: '/dashboard' },
        { title: 'dashboard.profile', icon: 'mdi-account', to: '/dashboard/profile' },
        { title: 'dashboard.collections', icon: 'mdi-heart', to: '/dashboard/collections' },
        { title: 'dashboard.history', icon: 'mdi-history', to: '/dashboard/history' },
        { title: 'dashboard.publications', icon: 'mdi-file-document-multiple', to: '/dashboard/publications' },
        { title: 'dashboard.drafts', icon: 'mdi-file-outline', to: '/dashboard/drafts' },
        { title: 'dashboard.following', icon: 'mdi-account-multiple', to: '/dashboard/following' },
        { title: 'dashboard.followers', icon: 'mdi-account-group', to: '/dashboard/followers' },
        { title: 'dashboard.messages', icon: 'mdi-message', to: '/dashboard/messages' },
        { title: 'dashboard.settings', icon: 'mdi-cog', to: '/dashboard/settings' }
      ],
      // 底部链接
      footerLinks: [
        { text: 'footer.help', to: '/help' },
        { text: 'footer.about', to: '/about' },
        { text: 'footer.contact', to: '/contact' },
        { text: 'footer.privacy', to: '/privacy' },
        { text: 'footer.terms', to: '/terms' }
      ],
      // 收藏内容
      collections: [],
      // 浏览历史
      history: [],
      // 发布内容
      publications: [],
      // 通知
      notifications: [],
      notificationCount: 0
    }
  },
  
  computed: {
    // 可用语言
    availableLocales() {
      return this.$i18n.locales
    },
    
    // 个人资料完善度
    profileCompletionPercentage() {
      let total = 0
      let completed = 0
      
      // 检查各项资料是否已填写
      if (this.user.nickname) completed++
      if (this.user.avatar) completed++
      if (this.user.bio) completed++
      if (this.user.email) completed++
      
      total = 4 // 总共4项基本资料
      
      return Math.round((completed / total) * 100)
    },
    
    // 是否有未读通知
    hasUnreadNotifications() {
      return this.notifications.some(notification => !notification.read)
    }
  },
  
  async created() {
    // 获取用户信息
    await this.fetchUserProfile()
    
    // 获取收藏内容
    await this.fetchCollections()
    
    // 获取浏览历史
    await this.fetchHistory()
    
    // 获取发布内容
    await this.fetchPublications()
    
    // 获取通知
    await this.fetchNotifications()
  },
  
  methods: {
    // 获取用户信息
    async fetchUserProfile() {
      try {
        const { data } = await this.$axios.get('/user/profile')
        this.user = data
      } catch (error) {
        console.error('获取用户信息失败', error)
      }
    },
    
    // 获取收藏内容
    async fetchCollections() {
      try {
        const { data } = await this.$axios.get('/user/collections', {
          params: { limit: 3 }
        })
        this.collections = data
      } catch (error) {
        console.error('获取收藏内容失败', error)
      }
    },
    
    // 获取浏览历史
    async fetchHistory() {
      try {
        const { data } = await this.$axios.get('/user/history', {
          params: { limit: 3 }
        })
        this.history = data
      } catch (error) {
        console.error('获取浏览历史失败', error)
      }
    },
    
    // 获取发布内容
    async fetchPublications() {
      try {
        const { data } = await this.$axios.get('/user/publications', {
          params: { limit: 3 }
        })
        this.publications = data
      } catch (error) {
        console.error('获取发布内容失败', error)
      }
    },
    
    // 获取通知
    async fetchNotifications() {
      try {
        const { data } = await this.$axios.get('/user/notifications')
        this.notifications = data
        this.notificationCount = data.filter(notification => !notification.read).length
      } catch (error) {
        console.error('获取通知失败', error)
      }
    },
    
    // 导航到指定页面
    navigateTo(path) {
      this.$router.push(this.localePath(path))
    },
    
    // 切换语言
    switchLanguage(locale) {
      this.$i18n.setLocale(locale)
    },
    
    // 显示通知抽屉
    showNotifications() {
      this.notificationDrawer = true
    },
    
    // 阅读通知
    async readNotification(id) {
      try {
        await this.$axios.put(`/user/notifications/${id}/read`)
        // 更新通知状态
        const index = this.notifications.findIndex(n => n.id === id)
        if (index !== -1) {
          this.notifications[index].read = true
          this.notificationCount = this.notifications.filter(n => !n.read).length
        }
      } catch (error) {
        console.error('标记通知为已读失败', error)
      }
    },
    
    // 删除通知
    async deleteNotification(id) {
      try {
        await this.$axios.delete(`/user/notifications/${id}`)
        // 从列表中移除
        this.notifications = this.notifications.filter(n => n.id !== id)
        this.notificationCount = this.notifications.filter(n => !n.read).length
      } catch (error) {
        console.error('删除通知失败', error)
      }
    },
    
    // 标记所有通知为已读
    async markAllAsRead() {
      try {
        await this.$axios.put('/user/notifications/read-all')
        // 更新所有通知状态为已读
        this.notifications.forEach(notification => {
          notification.read = true
        })
        this.notificationCount = 0
      } catch (error) {
        console.error('标记所有通知为已读失败', error)
      }
    },
    
    // 从收藏中移除
    async removeFromCollection(id) {
      try {
        await this.$axios.delete(`/user/collections/${id}`)
        // 从列表中移除
        this.collections = this.collections.filter(item => item.id !== id)
        this.$store.dispatch('showSnackbar', {
          text: this.$t('dashboard.removedFromCollection'),
          color: 'success'
        })
      } catch (error) {
        console.error('从收藏中移除失败', error)
      }
    },
    
    // 编辑发布内容
    editPublication(id) {
      this.navigateTo(`/dashboard/publications/edit/${id}`)
    },
    
    // 登出
    async logout() {
      try {
        await this.$auth.logout()
        this.$router.push(this.localePath('/'))
      } catch (error) {
        console.error('登出失败', error)
      }
    },
    
    // 切换主题
    toggleTheme() {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
      // 保存主题设置到本地存储
      localStorage.setItem('darkTheme', this.$vuetify.theme.dark)
    },
    
    // 格式化日期
    formatDate(date) {
      if (!date) return ''
      const options = { year: 'numeric', month: 'short', day: 'numeric' }
      return new Date(date).toLocaleDateString(this.$i18n.locale, options)
    },
    
    // 格式化时长
    formatDuration(seconds) {
      if (!seconds) return '0s'
      
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = seconds % 60
      
      if (minutes === 0) {
        return `${remainingSeconds}s`
      } else if (remainingSeconds === 0) {
        return `${minutes}m`
      } else {
        return `${minutes}m ${remainingSeconds}s`
      }
    },
    
    // 获取通知图标
    getNotificationIcon(type) {
      const icons = {
        system: 'mdi-information',
        comment: 'mdi-comment-text',
        like: 'mdi-heart',
        follow: 'mdi-account-plus',
        message: 'mdi-email'
      }
      
      return icons[type] || 'mdi-bell'
    },
    
    // 获取通知颜色
    getNotificationColor(type) {
      const colors = {
        system: 'info',
        comment: 'primary',
        like: 'red',
        follow: 'success',
        message: 'purple'
      }
      
      return colors[type] || 'primary'
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
}

.search-field {
  max-width: 300px;
}

.welcome-card {
  background: linear-gradient(to right, #1976d2, #64b5f6);
  color: white;
}

.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 5;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .search-field {
    max-width: 150px;
  }
  
  .theme-toggle {
    bottom: 70px;
  }
}
</style>